<template>
    <div class="order_details">
        <el-container>
            <el-header>
                <page-title>订单详情-{{status == 0 ? '待审核' :  status == 1 ? '待付款' : status == 2 ? '待发货' :  status == 3 ? '已发货' : '已驳回'}}</page-title>
            </el-header>
            <el-main class="content">
                <div class="print_box">
                    <el-row style="text-align:right">
                        <el-col :span="24">
                            <el-button plain icon="el-icon-arrow-left" @click="back">返回</el-button>
                        </el-col>
                    </el-row>
                </div>

                <div class="card_box" style="margin-top:20px">
                    <el-card class="box-card big-card">
                        <div slot="header" class="clearfix">
                            <span class="card_title"><i class="el-icon-warning"></i> 当前处方单状态：{{status == 0 ? '待审核' :  status == 1 ? '待付款' : status == 2 ? '待发货' :  status == 3 ? '已发货' : '已驳回'}}</span>
                            <el-button v-show="limitedShow.indexOf('3.2')!=-1&&status != '1'&&status != '3'  " :disabled="status == '1'||status == '0'||status == 3 " style="margin-left:30px;" type="primary" @click="dialogVisible = true">发货</el-button> 
                        </div>
                        <div class="text item">
                            <el-card class="box-card small-card" shadow="never">
                                <div slot="header" class="clearfix">
                                    <span>基本信息</span>
                                </div>
                                <div class="text item">
                                    <el-table
                                        :data="tableData"
                                        border
                                        style="width: 100%">

                                        <el-table-column
                                            prop="order_no"
                                            label="处方单编号">
                                        </el-table-column>

                                        <el-table-column
                                            prop="uid"
                                            label="用户账号">
                                        </el-table-column>

                                        <el-table-column
                                            prop="user.user_name"
                                            label="用户姓名">
                                        </el-table-column>

                                        <el-table-column
                                            prop="order_price"
                                            label="订单金额">
                                        </el-table-column>

                                        <el-table-column
                                            label="支付方式">
                                            <template slot-scope="scope">
                                                <span>{{scope.row.pay_way === '0' ? '未支付' : scope.row.pay_way === '2' ? '支付宝' : '微信'}}</span>
                                            </template>
                                        </el-table-column>

                                        <el-table-column
                                            label="订单来源">
                                            <template slot-scope="scope">
                                                <span>{{scope.row.source === '1' ? '移动端' : 'PC端'}}</span>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <el-table
                                        :data="tableData"
                                        border
                                        style="width: 100%">

                                        <el-table-column
                                            prop="doctor.doctor_id"
                                            label="医生id">
                                        </el-table-column>

                                        <el-table-column
                                            prop="doctor.name"
                                            label="医生姓名">
                                        </el-table-column>

                                        <el-table-column
                                            prop="doctor.domains"
                                            label="医生标签">
                                        </el-table-column>

                                        <el-table-column
                                            prop=""
                                            label="">
                                        </el-table-column>

                                        <el-table-column
                                            prop=""
                                            label="">
                                        </el-table-column>

                                        <el-table-column
                                            prop=""
                                            label="">
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </el-card>

                            <el-card class="box-card small-card" shadow="never">
                                <div slot="header" class="clearfix">
                                    <span>收货人信息</span>
                                </div>
                                <div class="text item">
                                    <el-table
                                        :data="tableData"
                                        border
                                        style="width: 100%">

                                        <el-table-column
                                            prop="user.user_name"
                                            label="收货人">
                                        </el-table-column>

                                        <el-table-column
                                            prop="user.phone"
                                            label="手机号码">
                                        </el-table-column>

                                        <el-table-column
                                            prop="zipCode"
                                            label="邮政编码">
                                        </el-table-column>

                                        <el-table-column
                                            prop="address"
                                            label="收货地址">
                                        </el-table-column>
                                    </el-table>
                                    
                                </div>
                            </el-card>
                            <el-card class="box-card small-card" shadow="never" v-show="kuaidiData.length!=0">
                                <div slot="header" class="clearfix">
                                    <span>物流信息({{numNo}})</span>
                                </div>
                                <div class="text item"> 
                                    <el-steps direction="vertical" :active="0"> 
                                        <el-step v-for="(item,index) in kuaidiData" :key="index" :title="index==0?'最新'+item.ftime:item.ftime" :description="item.context"></el-step>
                                    </el-steps> 
                                </div>
                            </el-card>
                        </div>
                    </el-card>
                </div>
            </el-main>
        </el-container>

        <!--弹框-->
        <el-dialog
            title="发货"
            :visible.sync="dialogVisible"
            :close-on-click-modal="false"
            width="40%"  >
            <div  class="dialog-item">
                <span>快递名称：</span>
                <el-select
                    v-model="nameValue" 
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请输入快递名称"
                    :remote-method="remoteMethod"
                    :loading="loading">
                    <el-option
                    v-for="item in optionsList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
                    </el-option>
                </el-select>
            </div>
             <div class="dialog-item">
                <span>快递单号：</span>
                <el-input style="display:inline-block;width:221px;" v-model="orderValue" placeholder="请输入快递单号"></el-input>
            </div>
            <span slot="footer" class="dialog-footer text-center">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitGoods">发 货</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import * as api from './../../../api/api'
export default {
    data() {
        return{
            limitedShow:sessionStorage.getItem('models').split(','),
            dialogVisible:false,
            tableData: [],//表格数据
            status: '',
            optionsList: [],
            nameValue: '',  //快递名称
            orderValue:'', //快递id
            orderNo:'',
            comNo:'', //查询物流
            numNo:'', //查询物流
            kuaidiData:[],  
            kuaidiLength:0,
            dateList: [{
                code : "shunfeng",
                id : "644",
                name : "顺丰速运" 
            },{
                code : "zhongtong",
                id : "947",
                name : "中通快递"
            },{
                code : "shentong",
                id : "519",
                name : "申通快递"
            },{
                code : "yuantong",
                id : "1029",
                name : "圆通速递" 
            },{
                code : "jd",
                id : "526",
                name : "京东物流" 
            },{
                code : "tiantian",
                id : "195",
                name : "天天快递" 
            },{
                code : "yunda",
                id : "1009",
                name : "韵达快递" 
            },{
                code : "httx56",
                id : "173",
                name : "汇通天下物流" 
            }],
            loading: false,  
        }
    },

    //计算属性
    computed: {

    },

    //钩子函数（页面挂载完成时触发）
    mounted() {
        this.getData(); 
        this.optionsList=this.dateList;
        let data = this.$route.query; 
        this.orderNo=JSON.parse(data.recipe).id; 
        this.comNo=JSON.parse(data.recipe).com;
        this.numNo=JSON.parse(data.recipe).num;
        this.getCodeData();  
        console.log(JSON.parse(data.recipe));
    },

    //自定义方法
    methods: {
        //物流信息
        getCodeData(){
            let vm = this;
            if(vm.comNo&&vm.numNo&&vm.status==3){
                let body={
                    "model":"Codes",
                    "com":vm.comNo,
                    "num":vm.numNo
                };
                api.getKuaidi(body).then(res=>{
                    if(res.data.code==200){
                        vm.kuaidiData=res.data.data;
                        if(res.data.data.length!=0){
                            vm.kuaidiLength=res.data.data.length;
                        } 
                    } 
                });
            } 
        },
        //提交发货
        submitGoods(){
            let vm =this;
            let body={
                model: "Orders",
                data:{
                    com:vm.nameValue,  //---快递公司code
                    num:vm.orderValue,  //---快递单号
                    status:3
                },
                update_condition:{
                    "id":vm.orderNo
                }
            };
            if(vm.regSite()){
                api.createData(body).then(res=>{
                    if(res.data.code==200){
                        vm.$message({
                            message:"发货成功",
                            type:'success'
                        }); 
                        vm.dialogVisible = false;
                        vm.status=3;
                        vm.comNo=vm.nameValue;
                        vm.numNo=vm.orderValue;
                        vm.getCodeData(); 
                    }
                });
            }  
        },
        regSite(){
            if(this.nameValue==''){
                vm.$message({ message:"快递名称不能为空" }); 
                return false;
            }else if(this.orderValue==''){
                vm.$message({ message:"快递单号不能为空" }); 
                return false;
            }else{
                return true;
            }
        },
        //搜索快递公司
         remoteMethod(query) { 
            let vm =this;
            if (query !== '') {
                vm.loading = true; 
                let body={
                    model: "Codes",
                    limit:"20",
                    offset:"0",
                    search:{
                        name:query
                    }
                };
                api.getDateList(body).then(res=>{
                    vm.loading = false;
                    vm.optionsList=res.data.data.data;
                });
            } else {
                vm.optionsList=vm.dateList;
            }
        },

        back() {
            this.$router.back()
        },
        getData() {
            let data = this.$route.query;
            this.tableData.push(JSON.parse(data.recipe));
            this.status = this.tableData[0].status;
        }
    },
}
</script>

<style lang="scss">
    .order_details{
        .el-header{
            padding: 0;
        }
        .el-date-editor .el-range-separator{
            width: 20px;
        }
        .el-table__header tr th{
            background-color: #f6f6f6;
        }
        .content{
            padding: 20px 80px;
            overflow: hidden;
            .card_box{
                .big-card{
                    .el-card__header{
                        background-color: #f2f2f2;
                        .card_title{
                            color: #F04844;
                        }
                    }
                }
                .small-card{
                    margin-top: 40px;
                    margin-bottom: 40px;
                    .el-card__header{
                        background-color: #fff;
                        .card_title{
                            color: #F04844;
                        }
                    }
                }
            }
        }
        .dialog-item{
            margin:10px 0;
        }
        .el-dialog__footer{
            text-align:center !important;
        }
        .el-step__head.is-process{
            color:red;
            border-color:red;
        }
        .el-step__title.is-process { 
            color: red;
        }
    }
</style>
